<template>
    <div style="width: 30px; margin: 0 auto">
        <el-popover placement="right" :width="400" trigger="click" :hide-after="0">
            <template #reference>
                <component is="PlusCircleOutlined" class="plusClass" ref="currentPlus"/>
            </template>
            <el-row :gutter="20">
                <el-col :span="8" class="colSpanClass" @click="addNode('YwuExecutorNode')"><span ><component is="UserOutlined"/> 执行人</span></el-col>
                <el-col :span="8" class="colSpanClass" @click="addNode('YwuApprovalNode')"><span ><component is="UserOutlined"/> 审批人</span></el-col>
                <el-col :span="8" class="colSpanClass" @click="addNode('YwuServiceNode')"><span ><component is="DatabaseOutlined"/> 服务节点</span></el-col>
            </el-row>

            <el-row :gutter="20">
                <el-col :span="8" class="colSpanClass" @click="addNode('YwuConditionalNode')"><span ><component is="ApartmentOutlined"/> 条件分支</span></el-col>
                <el-col :span="8" class="colSpanClass" @click="addNode('YwuParallelNode')"><span ><component is="BranchesOutlined"/> 并行分支</span></el-col>
            </el-row>
        </el-popover>
    </div>
    <div style="height: 30px"></div>

    <div style="width: 150px; margin: 0 auto" ref="currentDiv" @click="showDrawer()" @mouseenter="mouseEnter()" @mouseleave="mouseLeave()">
        <div class="serviceClass" ref="childRef">
            <div class="innerClass" style="padding-top: 10px;position: relative;">
                <component is="CloseCircleOutlined" class="closeClass" v-if="closeShow" @click="deleteNode()"/>
                <component is="DatabaseOutlined" style="line-height: 18px;font-size: 18px"/>
                <span class="spanClass">{{jsonInfo.name}}</span>
            </div>
        </div>
    </div>

    <div style="height: 30px"></div>

    <component v-if="this.jsonInfo.next && this.jsonInfo.next !== null" :is="this.jsonInfo.next['type']" :jsonInfo="this.jsonInfo.next" :ref="'commonChildRef'"
               :beforeNode="this.jsonInfo" :beforeNodeStartX="realBottomX" :beforeNodeStartY="realBottomY" :globalJson="globalJson"></component>

    <svg width="0" height="0">
        <defs>
            <marker id="arrow" markerWidth="6" markerHeight="6" refX="0" refY="2" orient="auto">
                <path d="M0,0 L0,4 L6,2 z" fill="#000000" />
            </marker>
        </defs>
    </svg>

    <svg width="100000px" height="100000px" style="position: absolute;z-index: -1; top: 0; left: 0;">
        <line :x1="beforeNodeStartX"
              :y1="beforeNodeStartY"
              :x2="currentPlusTopX"
              :y2="currentPlusTopY"
              stroke="#000" stroke-width="2" />
    </svg>

    <svg width="100000px" height="100000px" style="position: absolute;z-index: -1; top: 0; left: 0;">
        <line :x1="currentPlusBottomX"
              :y1="currentPlusBottomY"
              :x2="currentTopX"
              :y2="currentTopY"
              stroke="#000" stroke-width="2" marker-end="url(#arrow)" />
    </svg>

    <el-drawer v-model="drawerFlag" :with-header="false" :close-on-click-modal="false" :lock-scroll="true">
        <YwuServiceNodeDrawer :properties="jsonInfo.properties"/>
        <template #footer>
            <div style="flex: auto">
                <el-button @click="cancelUpdate()">取消</el-button>
                <el-button type="primary" @click="confirmUpdate()">确认</el-button>
            </div>
        </template>
    </el-drawer>
</template>

<script>
import {addNodeInfo} from "@/utils/flowCommon";
import emitter from "@/utils/mitt";
import YwuServiceNodeDrawer from "@/views/bpmn/flow/drawer/YwuServiceNodeDrawer";

export default {
    name: "YwuServiceNode",
    components: {YwuServiceNodeDrawer},
    props: ["jsonInfo", "beforeNodeStartX", "beforeNodeStartY", "beforeNode", "globalJson"],
    data() {
        return {
            currentTopX: 0,
            currentTopY: 0,
            currentBottomX: 0,
            currentBottomY: 0,
            currentPlusTopX: 0,
            currentPlusTopY: 0,
            currentPlusBottomX: 0,
            currentPlusBottomY: 0,
            closeShow: false,
            realBottomX: 0,
            realBottomY: 0,
            isDelete: false,
            drawerFlag: false,
            propertiesCopy: {}
        }
    },
    methods: {
        calcXy() {
            if (this.isDelete) {
                return;
            }
            let nodeInfo = this.$refs.currentDiv;
            this.currentTopX = nodeInfo.offsetLeft + nodeInfo.offsetWidth / 2;
            this.currentBottomX = nodeInfo.offsetLeft + nodeInfo.offsetWidth / 2;
            this.currentTopY = nodeInfo.offsetTop - 10;
            this.currentBottomY = nodeInfo.offsetTop + nodeInfo.offsetHeight;
            nodeInfo = this.$refs.currentPlus;
            this.currentPlusTopX = nodeInfo.offsetLeft + nodeInfo.offsetWidth / 2;
            this.currentPlusBottomX = nodeInfo.offsetLeft + nodeInfo.offsetWidth / 2;
            this.currentPlusTopY = nodeInfo.offsetTop;
            this.currentPlusBottomY = nodeInfo.offsetTop + nodeInfo.offsetHeight;
            this.realBottomX = this.currentBottomX;
            this.realBottomY = this.currentBottomY;
        },
        addNode(nodeType) {
            addNodeInfo(nodeType, this.beforeNode, this.jsonInfo, this.globalJson);
            emitter.emit("refreshLine", "refreshLine");
        },
        mouseEnter() {
            this.closeShow = true
        },
        mouseLeave() {
            this.closeShow = false;
        },
        deleteNode() {
            this.isDelete = true;
            this.beforeNode.next = this.jsonInfo.next;
            emitter.emit("refreshLine", "refreshLine");
        },
        showDrawer() {
            // 备份数据
            this.propertiesCopy = {...this.jsonInfo.properties}
            this.drawerFlag = true
        },
        confirmUpdate() {
            this.drawerFlag = false;
            if (this.jsonInfo.properties.name && this.jsonInfo.properties.name !== '') {
                this.jsonInfo.name = this.jsonInfo.properties.name
            }
        },
        cancelUpdate() {
            this.drawerFlag = false;
            // 还原数据
            this.jsonInfo.properties = {...this.propertiesCopy};
        }
    },
    mounted() {
        this.$nextTick(() => {
            this.calcXy();
        });
        // 在组件挂载时添加窗口大小改变的监听器
        window.addEventListener('resize', this.calcXy);
        // 接收事件
        emitter.on('refreshLine', (message) => {
            this.$nextTick(() => {
                this.calcXy();
            });
        });
    },
    beforeDestroy() {
        // 在组件销毁前移除监听器，避免内存泄漏
        window.removeEventListener('resize', this.calcXy);
    }
}
</script>

<style scoped lang="less">
.serviceClass {
    width: 150px;
    height: 80px;
    background-color: rgba(0, 255, 21, 0.4);
    border-radius: 10px;
    .innerClass {
        margin-left: 10px;
        .spanClass {
            display: inline-block;
            margin-left: 10px;
            width: 100px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            font-weight: bold;
            line-height: 16px;
            font-size: 16px;
        }
    }
}
.serviceClass:hover{
    cursor: pointer;
}

.plusClass {
    font-size: 30px;
}

.plusClass:hover {
    cursor: pointer;
    color: rgba(4, 85, 248, 0.91);
}

.colSpanClass{
    height: 50px;
    font-size: 20px;
    line-height: 50px;
}

.colSpanClass:hover {
    background-color: #dfe4e7;
    cursor: pointer;
}

.closeClass {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 15px;
}

.closeClass:hover {
    color: #ee4646;
}
</style>